<template>
	<view class="container" v-if="data && data.id">
		<view class="banner">
			<u-swiper height="520rpx" :list="list" indicator indicatorMode="line" circular></u-swiper>
		</view>
		<view class="p-t u-flex u-col-center u-row-between">
			<view class="price">
				￥<text>{{data.price}}</text>
			</view>
			<view class="total">
				库存:<text>{{number}}</text> 份
			</view>
		</view>
		<view class="f-title">
			{{data.name}}
		</view>
		<view class="f-info">
			{{data.price}}
		</view>
		<view class="list" v-if="data.type == 2">
			<view class="item">
				<view class="title">
					已包含
				</view>
				<view class="imgs u-flex u-col-center u-row-left">
					<view class="i">
						<image :src="http + data.image" mode="aspectFill"></image>
						<view class="t u-l-1">
							{{data.name}}
						</view>
						<view class="p">
							1份
						</view>
					</view>

				</view>
			</view>
			<view class="item" v-for="(item,index) in match_dish" :key="index">
				<view class="title">
					{{item.name}}（请选择{{item.number}}份）
				</view>
				<view class="imgs u-flex u-col-center u-row-left">
					<scroll-view class="scroll-view_H" scroll-x="true">

						<view class="i" v-for="(item2,index2) in item.list" :key="index2">
							<image :src="http + item2.image" mode="aspectFill"></image>
							<view class="t u-l-1">
								{{item2.name}}
							</view>
							<view class="c" v-if="item2.spec==2 || (item2.spec==1 && item2.num > 0)">
								<image src="@/static/image/fl.png" mode="aspectFill"
									@click="sub(item,index,item2,index2)" v-if="item2.num > 0"></image>
								<view class="cc">
									{{item2.num>0?item2.num:""}}
								</view>
								<image src="@/static/image/fr2.png" mode="aspectFill"
									@click="add(item,index,item2,index2)" v-if="item2.num == 0"></image>
								<image src="@/static/image/fr.png" mode="aspectFill" v-else
									@click="add(item,index,item2,index2)"></image>
							</view>
							<view class="btn" v-if="item2.spec==1" @click="openSpec(item,index,item2,index2)">
								选规格
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
		<view class="f-con">
			<u-parse :content="content"></u-parse>
		</view>
		<view class="f-footer u-flex u-col-center u-row-between">
			<view class="l" @click="reset">
				重置
			</view>
			<view class="r u-flex u-col-center u-row-between">
				<view class="rl" @click="changeCartShow">
					￥<text>{{data.price}}</text>
				</view>
				<view class="rr" @click="addCart">
					<view class="t">
						加入购物车
					</view>
					<view class="p">
						Add to Cart
					</view>
				</view>
			</view>
		</view>
		<view class="footer-cart" v-if="cartShow">
			<view class="list u-flex u-col-center">
				<view class="item" v-for="(item,index) in flist" :key="index">
					<view class="img">
						<image :src="http + item.image" mode="aspectFill" class="image"></image>
						<view class="t">
							<view class="text">×{{item.num}}</view>
							<view class="b" v-if="item.spec == 1" @click="editSpec(item.id)">
								<image src="@/static/image/edit2.png" mode="aspectFill"></image>
							</view>
						</view>

					</view>
					<view class="del" @click="delSpec(item.id,index)">
						<image src="/static/image/del2.png" mode="aspectFill"></image>
					</view>
				</view>
				<view class="item2" v-if="notYetShow(flist,maxNumber)">
					<view class="img">
						<image src="/static/image/foodx.png" mode="aspectFill"></image>
						<text>{{notYetNumber(flist,maxNumber)}}/{{maxNumber}}</text>
					</view>
				</view>
			</view>
		</view>
		<u-popup :show="show" @close="close" @open="open" mode="bottom" :round="10">
			<view class="pop-goods">
				<scroll-view scroll-y="true" class="scroll-Y">
					<view class="p-img">
						<image :src="http + specData.image" mode="aspectFill"></image>
					</view>
					<view class="p-title">
						{{specData.name}}
					</view>
					<view class="p-list">
						<view class="item" v-for="(item,index) in spec_list" :key="index">
							<view class="title">
								{{item.label}}
							</view>
							<view class="type-list">
								<view class="i u-flex u-col-center u-row-between" :class="{on:spec_user[index]==item2}"
									@click="changeSpec(index,item2)" v-for="(item2,index2) in item.value" :key="index2">
									<view class="l">
										{{item2}}
									</view>
									<view class="r">
										<image src="/static/image/c2.png" mode="aspectFill"></image>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="f-con">
						<u-parse :content="content"></u-parse>
					</view>
					<view class="p-btn" @click="specOk">
						确认
					</view>
				</scroll-view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				specData: {},
				content2: '',
				spec_user: [],
				spec_list: [],
				glist: [],
				show: false,
				list: [],
				cartShow: true,
				content: "说明：<br> 产品及包装以实物为准产品及包装以实物为准，产品及包装以实物为准产品及包装以实物为准，产品及包装以实物为准产品及包装以实物为准产品及包装以实物为准产品及包装以实物为准，产品及包装以实物为准。",
				id: "",
				data: {
					id: ""
				},
				shopData: {},
				match_dish: [],
				number: 0,
				http: this.$imgUrl,
				goodsData: {},
				sindex: -1,
				sindex2: -1,
				sid: '',
				flist: [],
				maxNumber: 0,

			}
		},
		onLoad(o) {
			this.id = o.id
			this.shopData = JSON.parse(uni.getStorageSync('shopData'))
			this.getData()
		},
		computed: {
			notYetShow() {
				return (list, n) => {
					let total = list.reduce((acc, cur) => acc + parseInt(cur.num), 0)
					return total < n
				}
			},
			notYetNumber() {
				return (list, n) => {
					let total = list.reduce((acc, cur) => acc + parseInt(cur.num), 0)
					return n - total
				}
			},
		},
		methods: {
			editSpec(id) {
				this.match_dish.forEach((item, index) => {
					item.list.forEach((item2, index2) => {
						if (item2.id == id) {
							this.sindex = index
							this.sindex2 = index2
							this.sid = item2.id
							this.specData = item2
							this.spec_list = item2.spec_list
							if (item2.spec_name) {
								this.spec_user = item2.spec_name.split('|')
							} else {
								this.spec_user = this.spec_list.map(item => item.value[0])
							}
							// this.cartShow = false
							this.show = true
						}
					})
				})

			},
			delSpec(id, index) {
				this.match_dish.forEach((item1, index1) => {
					item1.list.forEach((item2, index2) => {
						if (item2.id == id) {
							item2.num = 0
						}
					})
				})
				this.flist = this.match_dish.flatMap(item =>
					item.list.filter(item2 => item2.num > 0)
				);
				// this.flist.splice(index, 1)
				this.$forceUpdate()
			},
			changeCartShow() {
				this.cartShow = !this.cartShow
				if (this.cartShow) {
					// this.match_dish.forEach(item => {
					// 	item.list.forEach(item2 => {
					// 		if (item2.num > 0) {
					// 			this.flist.push(item2)
					// 		}
					// 	})
					// })
					this.flist = this.match_dish.flatMap(item =>
						item.list.filter(item2 => item2.num > 0)
					);

				} else {

					this.flist = []
				}
			},
			specOk() {
				let spec_name = this.spec_user.join('|')
				this.match_dish[this.sindex].list[this.sindex2].spec_name = spec_name
				this.match_dish[this.sindex].list[this.sindex2].num = 1
				this.flist = this.match_dish.flatMap(item =>
					item.list.filter(item2 => item2.num > 0)
				);
				this.show = false
				this.$forceUpdate()
			},
			openSpec(item, index, item2, index2) {
				this.cartShow = false
				this.sindex = index
				this.sindex2 = index2
				this.sid = item2.id
				this.specData = item2
				this.spec_list = item2.spec_list
				if (item2.spec_name) {
					this.spec_user = item2.spec_name.split('|')
				} else {
					this.spec_user = this.spec_list.map(item => item.value[0])
				}

				this.open()
			},
			changeSpec(i, t) {
				this.spec_user[i] = t
				this.$forceUpdate()
			},
			open() {
				// console.log('open');
				this.show = true
			},
			close() {
				this.show = false
				// console.log('close');
			},
			sub(item, index, item2, index2) {
				// this.cartShow = false
				// this.flist = []
				let num = this.match_dish[index].list[index2].num
				this.match_dish[index].list[index2].num--
				this.flist = this.match_dish.flatMap(item =>
					item.list.filter(item2 => item2.num > 0)
				);
				this.$forceUpdate()
			},
			add(item, index, item2, index2) {
				// this.cartShow = false
				// this.flist = []
				let num = this.match_dish[index].list[index2].num
				let numbers = parseInt(this.match_dish[index].number)
				let usernumbers = this.match_dish[index].list.reduce((acc, cur) => acc + parseInt(cur.num), 0)
				if (usernumbers >= numbers) {
					uni.showToast({
						title: `最多选${numbers}份`,
						icon: "none"
					});
					return
				}
				this.match_dish[index].list[index2].num++
				this.flist = this.match_dish.flatMap(item =>
					item.list.filter(item2 => item2.num > 0)
				);
				this.$forceUpdate()
			},
			addCart() {
				let match_dish = []
				this.match_dish.forEach(item => {
					item.list.forEach(item2 => {
						if (item2.num > 0) {
							match_dish.push({
								dish_id: item2.id,
								dish_name: item2.name,
								spec_name: item2.spec_name,
								number: item2.num,
							})
						}
					})
				})
				let total = match_dish.reduce((acc, cur) => acc + parseInt(cur.number), 0)
				if (total < this.maxNumber) {
					uni.showToast({
						title: '你有商品未选择',
						icon: "none"
					});
					return
				}

				function generateRandomString(length) {
					const chars = '0123456789abcdefghijklmnopqrstuvwxyz'; // 可选字符集
					let result = '';

					for (let i = 0; i < length; i++) {
						const randomIndex = Math.floor(Math.random() * chars.length);
						result += chars[randomIndex];
					}
					return result;
				}

				let data = {
					uuid: generateRandomString(10),
					id: this.id,
					shop_id: this.goodsData.shop_id,
					upday: this.goodsData.upday,
					uptime: this.goodsData.uptime,
					dish_data_id: this.goodsData.dish_id,
					spec_name: "",
					number: 1,
					oneprice: this.data.price,
					price: this.data.price,
					match_dish: match_dish,
					goods_data: this.goodsData
				}
				console.log(data, '----------------')

				let list = uni.getStorageSync('cartData') ? JSON.parse(JSON.stringify(uni.getStorageSync('cartData'))) : []
				if (list.length == 0) {
					uni.setStorageSync('cartData', [data])
					uni.showToast({
						title: '添加成功',
						icon: "none"
					});
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 1500)
				} else {
					function arraysEqual(a, b) {
						return JSON.stringify(a) === JSON.stringify(b);
					}
					let findIndex = list.findIndex(item => item.shop_id == data.shop_id && item.upday == data.upday && item
						.uptime == data.uptime && item.id == data.id && item.dish_data_id == data.dish_data_id && item
						.spec_name == data
						.spec_name && arraysEqual(item.match_dish, data.match_dish))
					console.log(findIndex, 'findIndex')
					if (findIndex > -1) {
						list[findIndex].number += 1
					} else {
						list.push(data)
					}
					uni.setStorageSync('cartData', JSON.parse(JSON.stringify(list)))
					uni.showToast({
						title: '添加成功',
						icon: "none"
					});
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 1500)
				}

			},

			getData() {
				this.$http.post('/app/dishs/dishDetail', {
					shop_id: this.shopData.id,
					dish_data_id: this.id
				}).then(res => {
					console.log(res)
					if (res.code == 0) {
						this.goodsData = res.data
						this.list = res.data.dish.imageList.map(item => this.$imgUrl + item)
						this.data = res.data.dish
						this.match_dish = res.data.dish.match_dish
						this.match_dish.forEach(item => {
							item.list.forEach(item2 => {
								item2.num = 0
								item2.spec_name = ''
							})
						})
						this.maxNumber = this.match_dish.reduce((acc, cur) => acc + parseInt(cur.number), 0)


						this.number = res.data.number
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						});
					}
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			},
			reset() {
				this.match_dish.forEach(item => {
					item.list.forEach(item2 => {
						item2.num = 0
						item2.spec_name = ''
					})
				})
				this.flist = []
			},
		}
	}
</script>

<style lang="less" scoped>
	@color: #E51B00;

	.pop-goods {
		padding: 30rpx;
		height: 80vh;
		box-sizing: border-box;

		.p-btn {
			position: fixed;
			left: 30rpx;
			bottom: 30rpx;
			right: 30rpx;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 40rpx;
			text-align: center;
			font-size: 28rpx;
			color: #fff;
			background: @color;
			border-radius: 40rpx;
		}

		.scroll-Y {
			width: 100%;
			height: 100%;
		}

		.p-img {
			width: 100%;
			height: 690rpx;
			border-radius: 20rpx;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.p-title {
			font-size: 32rpx;
			color: #333;
			line-height: 40rpx;
			height: 40rpx;
			margin-top: 20rpx;
		}

		.p-list {
			margin-top: 20rpx;

			.item {

				.type-list {
					margin-bottom: 40rpx;

					.i {
						margin-top: 20rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding: 0 20rpx;
						height: 90rpx;
						line-height: 90rpx;
						border-radius: 12rpx;
						border: 2rpx solid #D1D1D6;

						.l {
							font-size: 26rpx;
							color: #000;
						}

						.r {
							display: none;
							width: 40rpx;
							height: 40rpx;

							image {
								width: 100%;
								height: 100%;
								display: block;
							}
						}
					}

					.on {
						border: 2rpx solid @color;

						.r {
							display: block;
						}
					}

				}

				.title {
					height: 40rpx;
					line-height: 40rpx;
					
					font-size: 28rpx;
					color: #000000;
					text-align: left;
					position: relative;
					text-indent: 20rpx;

					&::after {
						content: '';
						position: absolute;
						left: 0;
						top: 4rpx;
						width: 6rpx;
						height: 32rpx;
						border-radius: 3rpx;
						background-color: @color ;
					}
				}

				.imgs {
					margin-top: 20rpx;
					display: flex;
					align-items: center;
					margin-bottom: 40rpx;

					.i {
						width: 224rpx;
						min-height: 320rpx;
						border-radius: 12rpx;
						overflow: hidden;
						border: 2rpx solid #E51B00;
						margin-right: 20rpx;

						image {
							width: 224rpx;
							height: 200rpx;
						}

						.btn {
							width: 88rpx;
							height: 44rpx;
							line-height: 44rpx;
							background: #000000;
							border-radius: 22rpx;
							text-align: center;
							font-size: 22rpx;
							color: #fff;
							margin: 20rpx auto;
						}

						.c {
							padding: 0 40rpx 0;
							display: flex;
							align-items: center;
							justify-content: space-between;
							text-align: center;

							image {
								width: 40rpx;
								height: 40rpx;
							}

							.cc {
								flex: 1;
								padding: 0 20rpx;
								height: 40rpx;
								line-height: 40rpx;
								font-weight: bold;
								font-size: 30rpx;
								color: #E51B00;
								text-align: center;

							}
						}

						.t {
							padding: 10rpx;
							height: 40rpx;
							line-height: 40rpx;
							font-size: 26rpx;
							color: #000000;
							text-align: left;

						}

						.p {
							height: 40rpx;
							line-height: 40rpx;
							font-size: 28rpx;
							color: @color;
							text-align: center;
						}
					}
				}
			}
		}
	}

	.container {
		.f-con {
			color: #B5B5BB;
			font-size: 26rpx;
			line-height: 40rpx;
			padding: 20rpx 20rpx 500rpx;
		}

		.list {
			padding: 20rpx;


			.item {


				.title {
					height: 40rpx;
					line-height: 40rpx;
					
					font-size: 28rpx;
					color: #000000;
					text-align: left;
					position: relative;
					text-indent: 20rpx;

					&::after {
						content: '';
						position: absolute;
						left: 0;
						top: 4rpx;
						width: 6rpx;
						height: 32rpx;
						border-radius: 3rpx;
						background-color: @color ;
					}
				}

				.imgs {
					margin-top: 20rpx;
					display: flex;
					align-items: center;
					margin-bottom: 40rpx;
					height: 370rpx;

					.scroll-view_H {
						width: 100%;
						height: 100%;
						white-space: nowrap;
					}

					.i {
						width: 224rpx;
						min-height: 320rpx;
						border-radius: 12rpx;
						overflow: hidden;
						border: 2rpx solid #E51B00;
						margin-right: 20rpx;
						display: inline-flex;
						flex-direction: column;

						image {
							width: 224rpx;
							height: 200rpx;
						}

						.btn {
							width: 88rpx;
							height: 44rpx;
							line-height: 44rpx;
							background: #000000;
							border-radius: 22rpx;
							text-align: center;
							font-size: 22rpx;
							color: #fff;
							margin: 10rpx auto;
						}

						.c {
							padding: 0 40rpx 0;
							display: flex;
							align-items: center;
							justify-content: space-between;
							text-align: center;

							image {
								width: 40rpx;
								height: 40rpx;
							}

							.cc {
								flex: 1;
								padding: 0 20rpx;
								height: 40rpx;
								line-height: 40rpx;
								font-weight: bold;
								font-size: 30rpx;
								color: #E51B00;
								text-align: center;

							}
						}

						.t {
							padding: 10rpx;
							height: 40rpx;
							line-height: 40rpx;
							font-size: 26rpx;
							color: #000000;
							text-align: left;

						}

						.p {
							height: 40rpx;
							line-height: 40rpx;
							font-size: 28rpx;
							color: @color;
							text-align: center;
						}
					}
				}
			}
		}

		.f-info {
			margin-top: 15rpx;
			line-height: 30rpx;
			
			color: #B5B5BB;
			text-align: left;
			padding: 0 20rpx;
			font-size: 26rpx;
		}

		.f-title {
			margin-top: 20rpx;
			line-height: 60rpx;
			font-weight: bold;
			font-size: 40rpx;
			color: #000000;
			padding: 0 20rpx;
		}

		.p-t {
			padding: 0 20rpx;
			height: 60rpx;
			line-height: 60rpx;
			margin-top: 25rpx;

			.price {


				font-size: 30rpx;
				color: @color;

				text {
					font-size: 48rpx;
					font-weight: 600;
					margin-left: 5rpx;
				}
			}

			.total {
				font-size: 28rpx;
				color: #B5B5BB;

				text {
					padding: 5rpx;
					color: #000;
				}
			}
		}

		.banner {
			width: 100%;
			height: 520rpx;

		}

		.footer-cart {
			position: fixed;
			left: 20rpx;
			right: 20rpx;
			bottom: 90rpx;
			background: #464646;
			box-shadow: inset 0rpx 8rpx 8rpx 0rpx rgba(0, 0, 0, 0.25);
			border-radius: 30rpx 30rpx 0rpx 0rpx;
			border: 8rpx solid #818181;
			padding: 30rpx 45rpx 90rpx;

			.list {
				display: grid;
				grid-template-columns: repeat(5, 1fr);
				gap: 50rpx 20rpx;

				.item2 {
					position: relative;
					width: 100rpx;
					height: 100rpx;

					.img {
						width: 100rpx;
						height: 100rpx;
						position: relative;
						display: flex;
						align-items: center;
						justify-content: center;
						text-align: center;
						border-radius: 50%;
						border: 4rpx solid @color;
						box-sizing: border-box;

						image {
							width: 60rpx;
							height: 28rpx;
						}

						text {
							position: absolute;
							bottom: -16rpx;
							padding: 0 10rpx;
							display: block;
							height: 44rpx;
							line-height: 44rpx;
							background: @color;
							border-radius: 22rpx;
							left: 50%;
							color: #fff;
							font-size: 20rpx;
							transform: translateX(-50%);
						}
					}
				}

				.item {
					position: relative;
					width: 100rpx;
					height: 100rpx;

					.img {
						width: 100rpx;
						height: 100rpx;
						position: relative;

						.image {
							width: 100%;
							height: 100%;
							border-radius: 50%;
							border: 4rpx solid @color;
						}

						.t {
							position: absolute;
							bottom: -16rpx;
							display: block;
							height: 44rpx;
							line-height: 44rpx;
							background: @color;
							border-radius: 22rpx;
							left: 50%;
							transform: translateX(-50%);
							display: flex;
							align-items: center;
							justify-content: center;
							padding-right: 10rpx;

							.b {

								width: 36rpx;
								height: 36rpx;
								border-radius: 50%;
								display: flex;
								align-items: center;
								text-align: center;
								background-color: #fff;
								justify-content: center;

								image {
									width: 24rpx;
									height: 24rpx;
								}
							}

							.text {
								flex: 1;
								width: 1rpx;
								color: #fff;
								font-size: 20rpx;
								padding: 0 10rpx 0 20rpx;
								min-width: 30rpx;

							}
						}


					}

					.del {
						width: 30rpx;
						height: 30rpx;
						position: absolute;
						top: -15rpx;
						right: -15rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}
				}
			}

		}

		.f-footer {
			position: fixed;
			bottom: 40rpx;
			left: 20rpx;
			right: 20rpx;
			z-index: 999;


			.l {
				width: 180rpx;
				height: 100rpx;
				background: #FFFFFF;
				border-radius: 50rpx;
				border: 2rpx solid #000000;
				line-height: 100rpx;
				text-align: center;
				font-size: 30rpx;
				color: #000;
			}

			.r {
				width: 510rpx;
				height: 100rpx;
				background: #000000;
				border-radius: 50rpx;
				box-sizing: border-box;
				padding: 0 30rpx;

				.rl {
					font-size: 24rpx;
					color: #fff;

					text {
						font-size: 40rpx;
						font-weight: 600;
					}

				}

				.rr {
					.t {
						height: 40rpx;
						line-height: 40rpx;

						
						font-size: 30rpx;
						color: #FFFFFF;
						text-align: center;
					}

					.p {
						line-height: 30rpx;
						font-size: 18rpx;
						color: #FFFFFF;
						text-align: center;

					}
				}
			}
		}
	}
</style>